<template>
	<view class="content">
		<!-- 头部轮播 -->
		<view class="carousel-section">
			<!-- 标题栏和状态栏占位符 -->

			<!-- 背景色区域 -->
			<view class="titleNview-background">
				<view class="top flex">
					<view class="address">成都 <image src="../../static/imgs/ic_down_white.png" mode=""></image>
					</view>
					<vie class='logo'>
						<image src="../../static/imgs/img_home_logo.png" mode=""></image>
					</vie>
				</view>
			</view>
			<view class="search">
				<input type="text" value="" placeholder="楼盘名/房产名" />

			</view>
			<!-- 分类 -->
			<view class="cate-section">

				<view class="cate-item" @click="optimization(item)" v-for="(item,index) in cateList" :key="item.id" v-if="index<10">
					<image :src="item.image" mode="aspectFit"></image>
					<view>{{item.name}}</view>
				</view>
			</view>
           <!-- banner -->
			<view class="swiper">
				<swiper :autoplay="autoplay" :previous-margin="previousMargin" :next-margin="nextMargin" circular="true" :interval="interval"
				 :duration="duration" @change="handleChange">
					<block v-for="(item, index) in banerlList" :key="index">
						<swiper-item class="swiper-items">
							<view class="swiper-item" :class=" [currentIndex !== index ? 'active':'']">
								<image :src="item.image"></image>
							</view>
						</swiper-item>
					</block>
				</swiper>
			</view>
		</view>
		<!-- 分类 -->
		<view class="body-view">
			<scroll-view class="top-menu-view" scroll-x="true" :scroll-left="scrollLeft">
				<block v-for="(menuTab,index) in menuTabs" :key="index">
					<view class="menu-one-view" v-bind:id="'tabNum'+index" @click="swichMenu(index)">
						<view :class="[currentTab==index ? 'menu-one-act' : 'menu-one']">
							<view class="menu-one-txt">{{menuTab.name}}</view>
							<view class="menu-one-bottom">
								<view class="menu-one-bottom-color"></view>
							</view>
						</view>
					</view>
				</block>
			</scroll-view>
			<swiper :current="currentTab" class="swiper-box-list" duration="300" @change="swiperChange">
				<block v-for="(swiperDate,index1) in swiperDateList" :key="index1">
					<swiper-item>
						<scroll-view class="swiper-one-list" scroll-y="true" @scrolltolower="loadMore(index1)">
							<!-- <block v-for="(swiperDate2,index2) in swiperDate" :key="index2">
								<view class="swiper-list-entity">
									<view>{{swiperDate2}}</view>
								</view>
							</block> -->
							<List :goodsList='goodsList'></List>
						</scroll-view>
					</swiper-item>
				</block>
			</swiper>
		</view>
	</view>
</template>

<script>
	import List from '@/components/list.vue';
	import {
		mapState
	} from 'vuex'

	export default {
		components: {
			List
		},
		computed: mapState(['forcedLogin', 'hasLogin', 'userName']),
		data() {
			return {
				background: [],
				vertical: false,
				autoplay: true,
				interval: 2000,
				duration: 500,
				previousMargin: '50upx',
				nextMargin: '50upx',
				currentIndex: 0,
				banerlList: [{
					'image': '../../static/imgs/img_home_had_house.png'
				}, {
					'image': '../../static/imgs/img_mine_bg_vip.png'
				}, {
					'image': '../../static/imgs/img_home_had_house.png'
				}],
				cateList: [{
					'image': '../../static/imgs/home1.png',
					'name': '新房开售',
					'url': 'newHouse'
				}, {
					'image': '../../static/imgs/home2.png',
					'name': '二手房'
				}, {
					'image': '../../static/imgs/home3.png',
					'name': '租房'
				}, {
					'image': '../../static/imgs/home4.png',
					'name': '商铺办公'
				}, {
					'image': '../../static/imgs/home5.png',
					'name': '找经纪人'
				}, {
					'image': '../../static/imgs/home6.png',
					'name': '装修'
				}, {
					'image': '../../static/imgs/home7.png',
					'name': '建材'
				}, {
					'image': '../../static/imgs/home8.png',
					'name': '购房百科'
				}, {
					'image': '../../static/imgs/home9.png',
					'name': '论坛'
				}, {
					'image': '../../static/imgs/home10.png',
					'name': '贷款计算'
				}],

				goodsList: [{
					'pid': 1,
					'defaultAlbum': '../../static/imgs/img_mine_bg_vip.png',
					'pName': 'aaa',
					'fSalePrice': '200',
					'iSales': '20'
				}, {
					'pid': 1,
					'defaultAlbum': '../../static/imgs/img_mine_bg_vip.png',
					'pName': 'aaa',
					'fSalePrice': '200',
					'iSales': '20'
				}, {
					'pid': 1,
					'defaultAlbum': '../../static/imgs/img_mine_bg_vip.png',
					'pName': 'aaa',
					'fSalePrice': '200',
					'iSales': '20'
				}, {
					'pid': 1,
					'defaultAlbum': '../../static/imgs/img_mine_bg_vip.png',
					'pName': 'aaa',
					'fSalePrice': '200',
					'iSales': '20'
				}],
				scrollLeft: 0,
				isClickChange: false,
				currentTab: 0,
				menuTabs: [{
					name: '二手房'
				}, {
					name: '新房'
				}, {
					name: '装修'
				}, {
					name: '建材'
				}, {
					name: '租房'
				}, {
					name: '商铺办公'
				}],
				swiperDateList: [
					[],
					[],
					[],
					[],
					[],
					[]
				]
			}
		},
		onLoad() {
			for (var i = 0; i < this.swiperDateList.length; i++) {
				this.getDateList(i);
			}
		},
		methods: {
			handleChange(e) {

				this.currentIndex = e.detail.current

			},
			swiperChange1(event) {
				let current = event.detail;
				this.currentIndex = current

			},
			swichMenu: async function(current) { //点击其中一个 menu
				if (this.currentTab == current) {
					return false;
				} else {
					this.currentTab = current;
					this.setScrollLeft(current);
				}
			},
			swiperChange: async function(e) {
				let index = e.target.current;
				this.setScrollLeft(index);
				this.currentTab = index;
			},
			optimization(item) {
				console.log(item.url)
				uni.navigateTo({

					url: item.url
				})
			},

			setScrollLeft: async function(tabIndex) {
				let leftWidthSum = 0;
				for (var i = 0; i <= tabIndex; i++) {
					let nowElement = await this.getWidth('tabNum' + i);
					leftWidthSum = leftWidthSum + nowElement.width;
				}
				let winWidth = uni.getSystemInfoSync().windowWidth;
				this.scrollLeft = leftWidthSum > winWidth ? (leftWidthSum - winWidth) : 0
			},
			getWidth: function(id) { //得到元素的宽高

				return new Promise((res, rej) => {
					uni.createSelectorQuery().select("#" + id).fields({
						size: true,
						scrollOffset: true
					}, (data) => {
						res(data);
					}).exec();
				})
			},
			loadMore: function(tabIndex) {
				console.log('正在加载更多数据。。。')
				this.getDateList(tabIndex);
			},
			getDateList: function(tabIndex) {
				for (var i = 0; i < 20; i++) {
					var entity = this.menuTabs[tabIndex].name + (this.swiperDateList[tabIndex].length);
					this.swiperDateList[tabIndex].push(entity);
				}
			}
		}


	}
</script>

<style scoped lang="scss">
	.content {
		background: #fff;
		padding: 0;
	}
	
	.titleNview-background {

		width: 100%;
		height: 220upx;
		background: url(../../static/imgs/img_top_bg.png)no-repeat -10px 0;
		background-size: 105% 100%;

		.top {
			position: relative;
			padding: 20px 24px;
			color: #fff;

			.address image {
				width: 12upx;
				height: 8upx;
				margin: 0 10upx;
				vertical-align: middle;
			}

			.logo image {
				position: absolute;
				width: 208upx;
				height: 44upx;
				left: 50%;
				margin-left: -104upx;
			}
		}
	}


	.top {
		position: absolute;
		z-index: 10;
	}

	.search {
		width: 702upx;
		height: 80upx;

		text-align: center;
		margin: 0 auto;
		background: rgba(255, 255, 255, 1);
		border-radius: 12upx;
		margin-top: -72upx;
		position: relative;
		z-index: 20;
		box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.28);

		input {
			line-height: 80upx;
			height: 80upx;
			font-size: 28upx;
		}

	}

	.cate-section {
		display: flex;
		display: -webkit-flex;
		justify-content: space-between;
		flex-wrap: wrap;
		font-size: 26upx;
		padding: 20upx 0;
	}

	.cate-item {
		width: 20%;
		text-align: center;
		margin-top: 40upx;
		font-size: 24upx;
		color: #222222;



	}

	.cate-item image {
		width: 60upx;
		height: 60upx;
	}


	.swiper-wrapper {
		flex: 1;
		width: 100%;
		padding-top: 80upx;
		margin: 0 auto;
	}

	swiper {
		width: 100%;
		height: 300upx;
	}

	.swiper-item {
		height: 300upx;
		display: flex;
		align-items: center;

	}

	.swiper-item image {
		width: 80%;
		height: 300upx;
		margin: 0 auto;
		border-radius: 20upx;
		transition: all 0.6s;

	}

	.swiper-item-active image {
		width: 90%;
		height: 300upx;
		transition: all 0.6s;
	}

	.body-view {
		display: flex;
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		height: 100%;
		width: 100%;
		align-items: flex-start;
		justify-content: center;
	}

	.top-menu-view {
		display: flex;
		white-space: nowrap;
		width: 100%;
		background-color: #FFFFFF;
		height: 50upx;
		margin-bottom: 40upx;
		/* 在这里设置导航条高度 */
	}

	.top-menu-view .menu-one-view {
		display: inline-block;
		white-space: nowrap;
		height: 100%;
	}

	.top-menu-view .menu-one-view .menu-one {
		/* 在这里写 单个按钮样式 */
		margin-left: 25upx;
		margin-right: 25upx;
		position: relative;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.top-menu-view .menu-one-view .menu-one .menu-one-txt {
		height: 40upx;
		font-size: 28upx;
		font-weight: 400;
		color: #222;
		line-height: 40upx;
	}

	.top-menu-view .menu-one-view .menu-one .menu-one-bottom {
		position: absolute;
		bottom: 0;
		width: 100%;
	}

	.top-menu-view .menu-one-view .menu-one .menu-one-bottom .menu-one-bottom-color {
		width: 60%;
		height: 4upx;
	}

	.top-menu-view .menu-one-view .menu-one-act {
		/* 在这里写 单个按钮样式 */
		margin-left: 48upx;
		margin-right: 48upx;
		position: relative;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.top-menu-view .menu-one-view .menu-one-act .menu-one-txt {
		height: 40upx;
		font-size: 28upx;
		font-weight: 400;
		color: #FF1C75;
		line-height: 40upx;
	}

	.top-menu-view .menu-one-view .menu-one-act .menu-one-bottom {
		position: absolute;
		bottom: 0;
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.top-menu-view .menu-one-view .menu-one-act .menu-one-bottom .menu-one-bottom-color {
		width: 60%;
		height: 4upx;
		background: url(../../static/imgs/ic_indicator.png)no-repeat;
		background-size: 100% 100%;
	}

	.swiper-box-list {
		flex: 1;
		width: 100%;
		height: auto;
		background-color: #FFFFFF;
	}

	.swiper-one-list {
		height: 100%;
		width: 100%;
	}

	.swiper-one-list .swiper-list-entity {
		width: 100%;
		height: 112upx;
		text-align: center;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
	}


	.swiper {
		padding: 20upx 0;
		position: relative;
		/* height: 400upx; */
		background: #f0f3f5;
	}

	.swiper swiper {
		height: 300upx !important;
	}

	.swiper-items {
		height: 300upx !important;
	}

	.swiper .swiper-item {
		height: 280upx;
		margin: 0 10upx !important;
		border-radius: 15upx;
	}

	.swiper .active {
		height: 260upx;
		margin: 20upx 10upx 0 !important;
		border-radius: 10upx;
		transition: all 0.2s ease-in 0s;
	}

	.swiper .swiper-item image {
		width: 100%;
		height: 100%;
		border-radius: 10upx;
	}

	.swiper .active image {
		width: 100%;
		height: 100%;
		border-radius: 10upx;
	}
</style>
